import React from 'react';
import { Button, List } from 'antd-mobile';

interface CitySelectorProps {
  visible: boolean;
  onClose: () => void;
  onSelect: (city: string) => void;
  currentCity: string;
}

const CitySelector: React.FC<CitySelectorProps> = ({
  visible,
  onClose = () => {},
  onSelect = () => {},
  currentCity = ''
}) => {
  // 所有城市列表
  const allCities = [
    '北京', '上海', '广州', '深圳', '天津', '重庆', '石家庄', '太原', '沈阳', '长春',
    '哈尔滨', '南京', '杭州', '合肥', '福州', '南昌', '济南', '郑州', '武汉', '长沙',
    '南宁', '海口', '成都', '贵阳', '昆明', '西安', '兰州', '西宁', '银川',
    '乌鲁木齐', '呼和浩特'
  ];

  // 热门城市
  const hotCities = [
    '北京', '上海', '广州', '深圳',
    '杭州', '南京', '成都', '重庆'
  ];

  if (!visible) return null;

  const handleCitySelect = (city: string) => {
    if (typeof onSelect === 'function') {
      onSelect(city);
    }
    if (typeof onClose === 'function') {
      onClose();
    }
  };

  return (
    <div style={{
      position: 'fixed',
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      background: '#fff',
      zIndex: 1000,
      display: 'flex',
      flexDirection: 'column'
    }}>
      <div style={{
        padding: '16px',
        borderBottom: '1px solid #eee',
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center'
      }}>
        <h2 style={{ margin: 0, fontSize: 18, fontWeight: 'bold' }}>选择城市</h2>
        <Button fill='none' onClick={onClose}>关闭</Button>
      </div>

      <div style={{ flex: 1, overflow: 'auto', padding: '16px' }}>
        <section style={{ marginBottom: '24px' }}>
          <h3 style={{ color: '#999', fontSize: 14, margin: '0 0 12px 0' }}>当前城市</h3>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '12px' }}>
            <Button fill='outline' disabled>{currentCity}</Button>
          </div>
        </section>

        <section style={{ marginBottom: '24px' }}>
          <h3 style={{ color: '#999', fontSize: 14, margin: '0 0 12px 0' }}>热门城市</h3>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '12px' }}>
            {hotCities.map((city) => (
              <Button
                key={city}
                fill='outline'
                onClick={() => handleCitySelect(city)}
                disabled={city === currentCity}
              >
                {city}
              </Button>
            ))}
          </div>
        </section>

        <section style={{ marginBottom: '24px' }}>
          <h3 style={{ color: '#999', fontSize: 14, margin: '0 0 12px 0' }}>全部城市</h3>
          <div style={{ padding: '0 12px' }}>
            {allCities.map((city) => (
              <div
                key={city}
                onClick={() => handleCitySelect(city)}
                style={{
                  padding: '12px 0',
                  borderBottom: '1px solid #eee',
                  color: city === currentCity ? '#999' : '#333',
                  cursor: city === currentCity ? 'not-allowed' : 'pointer'
                }}
              >
                {city}
              </div>
            ))}
          </div>
        </section>
      </div>
    </div>
  );
};

export default CitySelector; 